<template>
  <div id='released'>
    <van-tabs animated
      @click="onClick"
      color='rgba(26, 144, 255)'>
      <van-tab title="待被接受">

      </van-tab>
      <van-tab title="待被完成"
        name=1>

      </van-tab>
      <van-tab title="待确认"
        name=2>

      </van-tab>
      <van-tab title="已超时"
        name=-1>

      </van-tab>
      <van-tab name=3
        title="已完成">

      </van-tab>
    </van-tabs>
    <div class='box'
      v-if='name?false:true'>
      <v-list>
        <h4
          v-if='tasklist.length?false:true'>
          暂无任务</h4>
        <div
          v-for='(item,index) in tasklist'
          :key=index>
          <div
            v-if='tasklist.length?true:fasle'
            class='message'>
            <div
              @touchstart='gettaskinfo(item.mid)'>
              <van-icon
                class='icon'
                size='40'
                color='rgba(26, 144, 255)'
                :name='item.typeicon' />
              <span
                class='messageinfo'>
                <h4>
                  类型:{{item.typename}}
                </h4>
                <span
                  class='user'>价格:{{item.price}}元</span>
                <span
                  class='time'>截至时间:{{item.finishTime}}</span>

              </span>
            </div>
            <button
              v-if='status=="0"?true:false'
              @touchstart='cancelMission(item.mid)'>取消</button>
            <button
              v-if='status=="2"?true:false'
              @touchstart='confirmFinishMission(item.mid)'>确认</button>
            <button
              v-if='status=="2"?true:false'
              @click='show=true,mid=item.mid'>投诉</button>
          </div>
        </div>
      </v-list>
    </div>
    <component :is=name
      @func='send'>
      <van-cell-group>
        <van-field
          v-model='taskinfo.typename'
          label="类型"
          disabled />
        <van-field
          v-model='taskinfo.price'
          label="价格"
          disabled />
        <van-field
          v-model='taskinfo.userPhone'
          label="电话"
          disabled />
        <van-field
          type='textarea'
          v-model='taskinfo.detail'
          label="详情"
          disabled />
        <van-field
          v-model="taskinfo.finishTime"
          label="截止时间"
          disabled />
        <div class='imgbox'>
          <img
            v-for='(item,index) in imgUrlarr'
            :key=index
            :src=item>
        </div>
      </van-cell-group>
    </component>
    <van-action-sheet
      v-model:show="show"
      title="投诉">
      <div class="content">
        <van-field
          v-model="cDetail"
          rows="2" autosize
          label="投诉详情"
          type="textarea"
          maxlength="50"
          placeholder="请输入详情"
          show-word-limit />
        <button class='btn'
          @touchstart='newComplaint'>提交</button>

      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import time from '../../JS/time'
import changType from '../../JS/type.js'
import { Dialog, Notify } from 'vant'
import { createApp } from 'vue'
import { ActionSheet } from 'vant'
export default {
  name: 'released',
  data() {
    return {
      status: '0',
      tasklist: [],
      taskinfo: {},
      name: '',
      imgUrlarr: [],
      show: false,
      cDetail: '',
      mid: '',
    }
  },
  methods: {
    onClick(name, title) {
      this.http({
        method: 'post',
        url: '/api/listUserMissionsByStatus',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          status: name,
        },
      }).then((res) => {
        this.status = name
        this.tasklist = res.data.data
        changType(this.tasklist)
      })
    },
    getReleasedlist() {
      this.http({
        method: 'post',
        url: '/api/listUserMissionsByStatus',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          status: this.status,
        },
      }).then((res) => {
        this.tasklist = res.data.data
        changType(this.tasklist)
      })
    },
    gettaskinfo(id) {
      this.imgUrlarr = []
      for (var key in this.tasklist) {
        if (this.tasklist[key].mid == id) {
          this.taskinfo = this.tasklist[key]
        }
      }
      this.name = 'v-taskinfo'
      //获取图片
      this.http({
        method: 'post',
        url: '/api/getImageByExample',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          mid: id,
        },
      }).then((res) => {
        var resinfo = res.data.data
        resinfo.forEach((v, k) => {
          this.imgUrlarr.push('http://' + resinfo[k].url)
        })
      })
    },
    cancelMission(id) {
      Dialog.confirm({
        message: '是否确认取消发布？',
        confirmButtonColor: 'rgba(26, 144, 255, 0.8)',
      }).then(() => {
        this.http({
          method: 'post',
          url: '/api/cancelMission',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            uid: window.localStorage.getItem('uid'),
            token: window.localStorage.getItem('token'),
            mid: id,
          },
        })
          .then((res) => {
            this.getReleasedlist()
          })
          .catch(() => {
            // on cancel
          })
      })
    },
    confirmFinishMission(id) {
      Dialog.confirm({
        message: '是否确认接受方已经完成？',
        confirmButtonColor: 'rgba(26, 144, 255, 0.8)',
      }).then(() => {
        console.log(id)
        this.http({
          method: 'post',
          url: '/api/confirmFinishMission',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            uid: window.localStorage.getItem('uid'),
            token: window.localStorage.getItem('token'),
            mid: id,
          },
        }).then((res) => {
          this.getReleasedlist()
        })
      })
    },
    newComplaint() {
      Dialog.confirm({
        message: '是否确认进行投诉？',
        confirmButtonColor: 'rgba(26, 144, 255, 0.8)',
      }).then(() => {
        this.http({
          method: 'post',
          url: '/api/newComplaint',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            uid: window.localStorage.getItem('uid'),
            token: window.localStorage.getItem('token'),
            mid: this.mid,
            cDetail: this.cDetail,
          },
        }).then((res) => {
          if (res.data.data.status == 0) {
            this.show = false
            Notify({
              type: 'primary',
              message: '投诉成功',
              duration: 800,
              background: 'rgba(26, 144, 255, 0.8)',
            })
            this.getReleasedlist()
          } else {
            this.show = false
            Notify({
              type: 'primary',
              message: '投诉失败',
              duration: 800,
              background: 'rgba(26, 144, 255, 0.8)',
            })
          }
        })
      })
    },

    send(data) {
      this.name = data
    },
  },
  components: {
    'v-list': () => import('../../components/list'),
    'v-taskinfo': () => import('../../components/taskinfo'),
  },
  props: {},
  computed: {},
  watch: {},
  created() {
    this.getReleasedlist()
  },
  mounted() {
    this.imgUrlarr = []
  },
}
</script>

<style scoped lang='less'>
.content {
  margin-bottom: 3rem !important;
  text-align: center;
  .btn {
    display: inline-block;
    width: 8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
    font-size: 1rem;
    margin-top: 1.4rem;
    outline: none;
    border: none;
    color: #fff;
    background-color: rgba(26, 144, 255, 0.8);
    text-align: center;
    border-radius: 0.1rem;
  }
}
#released {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  position: relative;
  .box {
    background: rgb(248, 248, 248);
  }
}
</style>
